import { RouteRecordRaw, createRouter, createWebHashHistory } from "vue-router";
import LoginVue from "@/views/Login/index.vue";
import { getUserInfoApi } from "@/api";
import { useUserStore } from "@/store/userStore";
import { TransRouteStructyWidthCondiction } from "@/common";
import { ElMessage } from "element-plus";

const routes: RouteRecordRaw[] = [
  {
    path: "/login",
    component: LoginVue,
  },
  {
    path: "/",
    component: () => import("@/components/layout/layout.vue"),
    redirect: "/index",
    children: [
      {
        path: "index",
        component: () => import("@/views/home/index.vue"),
      },
    ],
  },
  // 目标： 动态路由 ， 目的是 不同权限的用户，只能访问自己拥有的路由
  // 怎么实现： 把后端返回的数据，动态添加为下面的结构
  // VueRouter 里面，提供了一个API    addRoute(路由表配置对象)
  // {
  //   path: '/ums',
  //   component: () => import('@/components/layout/layout.vue'),
  //   children: [
  //   //  {
  //   //   path:"admin",
  //   //   component : ()=>import("../aaa.vue")
  //   //  }
  //   ]
  // },
  // {
  //   path: '/pms',
  //   component: () => import('@/components/layout/layout.vue'),
  //   children: [
  //   //  {
  //   //   path:"addProduct",
  //   //   component : ()=>import("../bbbb.vue")
  //   //  }
  //   ]
  // }
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});
// let count = 1;
router.beforeEach((to, from, next) => {
  // console.log(to.path);

  // console.log("进入beforEach的次数：" + count++);
  const userStore = useUserStore();
  let token = localStorage.getItem("token");
  // 判断是否已经有了权限， 如果没有才请求 - 判断pinia里面有没有数据 + 有token
  if (token && userStore.menus.length === 0) {
    // 获取用户的权限的请求，一定不能在layout里面，原因如果我们刷新的时候，根本进不去layout，就不会发请求，就不会生成动态路由
    getUserInfoApi().then((res) => {
      if (res.code === 200) {
        // 把数据存储到pinia里面 - pinia里 永远只存后端返回的数据 ，你需要使用的时候 就再自己处理
        userStore.menus = res.data.menus;
        userStore.username = res.data.username;

        // 如果请求后端的权限数据成功，需要生成一个结构，用于生成动态路由 , 目标： 所有的动态路由不仅仅是左侧菜单的路由
        // const levelOne = TransRouteStructy(res.data.menus);
        const levelOne = TransRouteStructyWidthCondiction(res.data.menus);
        // 生成动态路由
        levelOne.forEach((item) => {
          let route: RouteRecordRaw = {
            name: item.name,
            path: `/${item.name}`,
            component: () => import("@/components/layout/layout.vue"),
            children: [],
            meta: {
              title: item.title,
            },
          };
          item.children?.forEach((c) => {
            let child: RouteRecordRaw = {
              name: c.name,
              path: c.name,
              component: () => import(`@/views/${item.name}/${c.name}.vue`),
              meta: {
                title: c.title,
              },
            };
            // 控制每个父路由能自动重定向到第一个子路由
            if (route.children?.length === 0) {
              route.redirect = "/" + item.name + "/" + child.path;
            }
            route.children?.push(child);
          });

          router.addRoute(route);
        });
      }

      // 查看所有已经激活的路由表
      // console.log(router.getRoutes());
      // 跳转到 想要跳转的路由，让其再次进入 beforeEach ，走下面的else的放行
      // console.log("next有参数");
      next(to.fullPath);
    });
  } else if (token && to.path === "/login") {
    // 如果在已经登录的情况下，用户直接访问登录页 ，我们直接跳转到原来的页面
    ElMessage.error("请先退出登录");
    next(from.fullPath);
  } else {
    // console.log("next没有参数");
    // 放行
    next();
  }
});

export default router;
